<template>
    <div class="page-changeCity">
        <el-row>
            <Province />
        </el-row>
        <el-row>
            <hot title="热门城市" :list="hotList" />
        </el-row>
        <el-row>
            <hot title="最近访问" :list="recentList" />
        </el-row>
        <el-row>
            <Category />
        </el-row>
    </div>
</template>

<script>
import api from '@/api/index.js'
import Province from '@/components/changeCity/province.vue'
import hot from '@/components/changeCity/hot.vue'
import Category from '@/components/changeCity/category.vue'
export default {
  name: 'changeCity',
  data () {
    return {
      // hotList: ['哈尔滨', '株洲市', '衡阳市', '长沙市', '永州市'],
      hotList: [],
      recentList: ['哈尔滨', '株洲市', '衡阳市', '长沙市', '永州市']
    }
  },
  created () {
    api.getHotCity().then(res => {
      this.hotList = res.data.data.map((item) => item.name)
    })
    api.getRecentCity().then(res => {
      this.recentList = res.data.data.map((item) => item.name)
    })
  },
  components: {
    Province,
    hot,
    Category
  }
}
</script>

<style lang="scss">
 @import "@/assets/css/changecity/hot.scss"
</style>
